<template>
    <div class="find-goods">
        <!-- 我是发现好物
        <div v-for="(item,index) in goodsList" :key="index">
            {{ item.name }}
        </div> -->
        <img src="@/assets/images/find-goods.png">
        <vue3-seamless-scroll 
        :list="goodsList" 
        class="scroll"
        direction="left"
        hover='true'
        step="0.5"
        singleLine="true"
        >
            <div class="item" v-for="(item,index) in goodsList" 
            :key="index"
            @click="toGoodsDetail(item.sku_id)"
            >
                <div v-if="index % 2 === 0">
                    <span class="dian1">{{item.name}}</span>
                    <img :src="item.image">
                </div>
                <div v-else>
                    <img :src="item.image">
                    <span class="dian1">{{item.name}}</span>
                </div>
            </div>
        </vue3-seamless-scroll>
    </div>
</template>

<script setup>
    import { getFindGoods } from '@/network/home'
    import { onMounted,ref } from 'vue'
    import { toGoodsDetail } from '@/utils/goods'

    const goodsList = ref([])

    const getGoodsList = async () => {
        const GoodsList =  await getFindGoods()
        goodsList.value = GoodsList
    }

    onMounted(() => {
        getGoodsList()
    })
</script>

<style lang="less" scoped>
    .find-goods {
        display: flex;
        width: var(--content-width);
        margin: 0 auto;
        >img {
            width: 190px;
            height: 260px;
        }
        .scroll {
            height: 260px;
            width: 1000px;
            overflow: hidden;
            margin-left: 10px;
            background-color: #fff;
        .item {
            height: 260px;
            width: 150px;
            margin-top: 15px;
            padding: 10px;
            &:hover {
                cursor: pointer;
            }
            span {
                width: 150px;
                font-size: 14px;
                margin: 10px auto;
                
            }

            img {
                border-radius: 20px;
                width: 150px;
                height: 190px;
                // padding: 10px;
            }
        }
    }
    }
    


</style>